<template>
  <view class="content">
    <tui-loading v-if="loadingTips" :isMask="true"></tui-loading>
    <view v-if="placeList.length>0" class="albumList">
      <view class="placeIcon">
        <image mode="aspectFit" src="https://echengtuhua.oss-cn-shenzhen.aliyuncs.com/locIconSelect.png">
        </image>
      </view>
      <!-- 景点照片 -->
      <view class="placeAlbumAll">
        <view class="placeAlbum">
          <view class="placeName">
            {{ placeList[0].name }}
          </view>
          <view class="photoList">
            <view v-for="(item, index) in placeList[0].scenicPhotos" :key="index" class="photoItem">
              <image :src="item.url" mode="scaleToFill" @tap="previewShare(item)"></image>
            </view>
          </view>
        </view>
        <!-- 景点任务照片 -->
        <view v-for="(ite,index) in placeList[0].tasks" :key="index" class="placeAlbum">
          <view class="placeName">
            任务：{{ ite.name }}
          </view>
          <view v-for="(i,index) in ite.taskPhotos" :key="index" class="photoList">
            <view class="photoItem">
              <image :src="i.url" mode="scaleToFill" @tap="previewImage(i.url)"></image>
            </view>
          </view>
        </view>
        <!-- 共享相册 -->
        <view class="placeAlbum">
          <view class="placeName">
            共享相册
            <view v-if="roles.leader && idsData.locked" class="uploadText" @tap="uploadSenicShare(scenicId)">
              上传团队照片
            </view>
          </view>
          <view class="photoList">
            <view v-for="(pic, index) in placeList[0].scenicSharingPhotos" :key="index" class="photoItem">
              <image :src="pic.url" mode="scaleToFill" @tap="preview2(pic)"></image>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-else style="margin: 0 auto; color: darkgray;">
      暂无留影
    </view>
    <!-- 上传新照片 -->
    <view class="takePic" @tap="uploadPic()">
      <image mode="aspectFit" src="https://echengtuhua.oss-cn-shenzhen.aliyuncs.com/takePhoto.png"
             style="width: 100rpx;height: 100rpx;"></image>
    </view>

    <!-- 图片点击操作列表-景点 -->
    <tui-actionsheet :item-list="itemList" :show="showActionSheet" @cancel="this.showActionSheet= false"
                     @click="selectClick">
    </tui-actionsheet>
    <!-- 共享相册图片点击操作 -->
    <tui-actionsheet :item-list="itemList2" :show="showActionSheet2" @cancel="this.showActionSheet2= false"
                     @click="selectClickShare">
    </tui-actionsheet>

    <!--图片预览  -->
    <tui-gallery :show="showMask" :urls="urls" @hide="hidePreview"></tui-gallery>
  </view>
</template>

<script>
import {
  getPlacePhotoList,
  addPlacePhoto,
  delPlacePhoto,
  isSharePhoto,
  upLoadGroupPhoto
} from '@/api/tourplan.js'
import {
  baseUrl
} from "@/common/unit.js"

export default {
  props: {
    idsData: {
      type: Object,
      default: {}
    }
  },

  data() {
    return {
      placeList: [],
      scenicId: 0, //景点id
      groupId: 0, //团队id
      partyId: 0, //个人id
      itineraryId: 0,
      loadingTips: false,
      serverUrl: baseUrl + '/user/uploadFile/uploadFile',
      showActionSheet: false,
      showActionSheet2: false,
      itemList: [{
        text: "查看",
        color: "#2B2B2B"
      }, {
        text: "共享",
        color: "#2B2B2B"
      }, {
        text: "删除",
        color: "#ff0000"
      }],
      itemList2: [{
        text: "查看",
        color: "#2B2B2B"
      }, {
        text: "取消共享",
        color: "#ff0000"
      }],
      imageItem: {},
      urls: [{
        src: '',
        desc: ''
      }], //图片预览url
      showMask: false, //是否预览
      roles: {},
    }
  },
  onReady() {
    const that = this
    that.scenicId = that.idsData.scenicId
    that.groupId = that.idsData.groupId
    that.partyId = that.idsData.partyId
    that.roles = that.idsData.roles
    that.itineraryId = that.idsData.itineraryId
    that.initData()
  },
  methods: {
    initData() {
      const that = this
      //获取相册
      that.loadingTips = true
      this.getPlacePhoto()
    },
    //获取景点照片--个人 (status:0个人 1团队)
    getPlacePhoto() {
      const that = this
      getPlacePhotoList({
        tel: uni.getStorageSync('userinfo').phone,
        itineraryId: that.itineraryId,
        scenicId: that.scenicId
      }).then(res => {
        that.placeList = res.scenics
        that.loadingTips = false
      }).catch(err => {
      })
    },
    //上传照片
    uploadPic() {
      const that = this
      uni.chooseImage({
        count: 1, //默认9
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album'], //从相册选择
        success: function (res) {
          const tempFilePaths = res.tempFilePaths;
          uni.uploadFile({
            url: that.serverUrl, //仅为示例，非真实的接口地址
            filePath: tempFilePaths[0],
            name: 'file',
            success: (uploadFileRes) => {
              const result = JSON.parse(uploadFileRes.data)
              that.postAddPic(result.data, 0)
            }
          });
        }
      })
    },

    //提交新增留影图片
    postAddPic(url, status) {
      const that = this
      that.loadingTips = true
      addPlacePhoto({
        itineraryId: that.itineraryId,
        partyId: that.partyId,
        highlightMomentUrl: url,
        scenicId: that.scenicId,
        groupId: that.groupId,
        status: status > 0 ? status : 0,
      }).then(res => {
        that.getPlacePhoto()
      }).catch(err => {

      })
    },

    //删除留影图片
    delectPic(id, url) {
      const that = this
      that.loadingTips = true
      delPlacePhoto(id, {
        itineraryId: that.itineraryId,
        partyId: that.partyId,
        highlightMomentUrl: url,
        scenicId: that.scenicId,
        groupId: that.groupId,
        status: 0,
      }).then(res => {
        that.getPlacePhoto()
      }).catch(err => {

      })
    },

    //组长上传团队照片
    uploadSenicShare(id) {
      const that = this
      uni.chooseImage({
        count: 1, //默认9
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album'], //从相册选择
        success: function (res) {
          const tempFilePaths = res.tempFilePaths;
          uni.uploadFile({
            url: that.serverUrl, //仅为示例，非真实的接口地址
            filePath: tempFilePaths[0],
            name: 'file',
            success: (uploadFileRes) => {
              const result = JSON.parse(uploadFileRes.data)
              that.postGruopSenicPhoto(id, result.data)
            }
          });
        }
      })
    },

    //提交照片
    postGruopSenicPhoto(scenicId, url) {
      const that = this
      upLoadGroupPhoto({
        itineraryId: that.itineraryId,
        tel: uni.getStorageSync('userinfo').phone,
        scenicId: scenicId,
        url: url
      }).then(res => {
        that.getPlacePhoto()
      })
    },

    //是否分享照片
    isShared(id, status) {
      const that = this
      that.loadingTips = true
      isSharePhoto({
        highlightId: id,
        status: status
      }).then(res => {
        that.getPlacePhoto()
      }).catch(err => {
        console.log(err)
      })
    },

    //显示景点相册操作栏
    previewShare(item) {
      this.imageItem = item
      this.showActionSheet = true
    },

    //显示共享相册操作栏
    preview2(item) {
      this.imageItem = item
      this.showActionSheet2 = true
    },

    //景点相册点击
    selectClick(e) {
      const that = this
      console.log(e)
      if (e.index < 1) {
        //预览
        this.previewImage(this.imageItem.url)
      } else if (e.index === 1) {
        //共享
        console.log(this.imageItem)
        this.isShared(this.imageItem.id, 1)
      } else if (e.index === 2) {
        //删除
        console.log(this.imageItem)
        that.delectPic(this.imageItem.id, this.imageItem.url)
      }
      this.showActionSheet = false
    },

    //共享相册点击
    selectClickShare(e) {
      const that = this
      if (e.index === 1) {
        //取消共享
        this.isShared(this.imageItem.id, 0)
      } else {
        //查看
        this.previewImage(this.imageItem.url)
      }
      this.showActionSheet2 = false
    },
    //预览图片
    previewImage(url) {
      this.urls[0].src = url
      this.showMask = true
    },
    hidePreview() {
      this.showMask = false
    },
  }
}
</script>

<style>
.content {
  margin-top: 80rpx;
  justify-items: center;
  align-items: center;
}

.albumList {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  border-left: 1px dashed #FF9802;
  width: 90%;
  margin-left: 100rpx;
}

.placeIcon {
  position: absolute;
  top: -30rpx;
  left: -30rpx;
  width: 60rpx;
  height: 60rpx;
}

.placeIcon image {
  width: 60rpx;
  height: 60rpx;
}

.placeAlbumAll {
  margin-left: 30rpx;
  margin-top: -20rpx;
  width: 90%;
  display: flex;
  flex-direction: column;
  padding-bottom: 30rpx;
}

.placeAlbum {
  display: flex;
  flex-direction: column;
  width: 90%;
  height: 200rpx;
  overflow: auto;
}

.placeName {
  display: flex;
  align-items: center;
  width: 100%;
  font-size: 30rpx;
  font-weight: 550;
}

.photoList {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 12rpx 0rpx;
  width: 100%;
  height: 136rpx;
  overflow: scroll;
}

.photoItem {
  margin-left: 15rpx;
  width: 136rpx;
  height: 136rpx;
  border-radius: 20rpx;
}

.photoItem image {
  width: 136rpx;
  height: 136rpx;
}

.takePic {
  position: absolute;
  right: 0;
  top: 50%;
  padding: 10rpx;
  width: 100rpx;
  height: 100rpx;
  border: 1px dashed gray;
  border-right: none;
  border-radius: 20rpx 0rpx 0rpx 20rpx;
}

.uploadText {
  margin-left: 20rpx;
  font-size: 20rpx;
  font-family: PingFang SC, PingFang SC-Heavy;
  font-weight: 800;
  color: #4186F5;
}
</style>
